<template>
	<div>

		<!--网页内容-->
		<div class='container'>
			<h2>搜索结果</h2>
			<div class='list' v-if='isResult'>

				<figure v-for="item in searchPro" @click='godetail(item._id)'>
					<strong class="title">{{item.title}}</strong>
					<span class="author">{{item.author}}</span>
					<img class='showImg' v-bind:src="getCoverUrl(item.coverImg_url)">
					<figcaption>
						<div class="info">
							<p class='sign'>
								<a href="javascript:" class="icon siIcon"></a><span>{{item.sign}}</span></p>
							<p class='like'>
								<a href="javascript:" class="icon liIcon"></a><span>{{item.likes.length}}</span></p>
							<p class='star'>
								<a href="javascript:" class="icon stIcon"></a><span>{{getstar(item.stars)}}</span></p>
						</div>
					</figcaption>
				</figure>



			</div>
			<h3 v-if='notResult'>没有找到</h3>
			<span class="page_bottom">
	           		<div class="pg">
			            <strong>1</strong>
			            <a href="">2</a>
			            <a href="">3</a>
			            <a href="">4</a>
			            <a href="">5</a>
			            <a href="" class="last">... 10</a>
		           		<a href="" class="nxt">下一页</a>
		            </div>
	        </span>
		</div>
	</div>

</template>

<script>
	import $ from "jquery";
	export default {
		name: 'footer',
		created() {

			this.$store.dispatch({
				type: "httpMethod",
				method: "post",
				url: '/pro/searchPro',
				data: {
					title: this.$route.query.title,
					
				},
				callback: (result) => {
					console.log(result);
					this.searchPro = result.body.data;
				}
			})




		},

		watch: {
			$route(newValue) {
				this.$store.dispatch({
					type: "httpMethod",
					method: "post",
					url: '/pro/searchPro',
					data: {
						title: this.$route.query.title
					},
					callback: (result) => {
						console.log(result);
						this.searchPro = result.body.data;
					}
				})
			}
		},

		data() {
			return {
				searchPro: [],
				notResult:false,
			}
		},
		computed:{
			isResult(){
				if(this.searchPro){
					
					return true
				}else{
					
					return false
				}
			}
		},
		methods: {
			godetail(_id) {
				this.$router.push({
					path: '/detail/',
					query: {
						_id: _id,
					}
				});
			},
			getCoverUrl(data) {
				return this.$store.state.ip + data;
			},
			getstar(star) {
				let sum = 0;
				for (let i = 0; i < star.length; i++) {
					sum = sum + star[i].count;
				}
				return Math.ceil(sum / star.length) ? Math.ceil(sum / star.length) : 0;
			}

		}
	}

</script>

<style scoped>
	@import '../../assets/css/proList.css';
</style>